<template>
  <HeadContainer title="證件資料" @back="back()">
    <div class="gap-col-16">
      <div class="text-white font-size-14 font-style-normal font-weight-500 line-height-140">
        請填入您的資訊 (需與證件相符)
      </div>
      <div class="gap-col-">
        <InputWrap
          label="姓名"
          placeholder="请输入姓名"
          v-model="profile.name.value"
          :err-msg="profile.name.error"
        ></InputWrap>
      </div>
      <div>
        <div class="text-white font-size-12 font-style-normal font-weight-400 line-height-120 mb-2">出生年月日</div>
        <DateSelector v-model="profile.birth.value" :err-msg="profile.birth.error"></DateSelector>
      </div>
      <div>
        <div class="text-white font-size-12 font-style-normal font-weight-400 line-height-120 mb-2">發行日期</div>
        <DateSelector v-model="profile.publishDate.value" :err-msg="profile.publishDate.error"></DateSelector>
      </div>
      <div>
        <InputWrap
          label="E-mail"
          placeholder="请输入E-mail"
          v-model="profile.email.value"
          :err-msg="profile.email.error"
        ></InputWrap>
      </div>
      <v-divider></v-divider>
      <BlockButton label="確認所有資訊" :is-gradient="false" @click="confirm()"></BlockButton>
    </div>
  </HeadContainer>
</template>
<script setup>
import { reactive } from 'vue'
import { storeToRefs } from 'pinia'
import { useBecomeCreatorDataStore } from '@/store/become-creator-data'
import { useBecomeCreatorRouteStore } from '@/store/become-creator-route'
import { useYup, validate } from '@/plugins/yup'
import BlockButton from '@/components/button/BlockButton.vue'
import DateSelector from '@/components/form/DateSelector.vue'
import HeadContainer from '@/components/layout/HeadContainer.vue'
import { BECOME_CREATOR_ROUTES } from '@/constant'
import InputWrap from '../../../components/form/InputWrap.vue'

const routeStore = useBecomeCreatorRouteStore()
const { to, back } = routeStore

const dataStore = useBecomeCreatorDataStore()
const { profile: storeProfile } = storeToRefs(dataStore)

const Yup = useYup()

const profile = reactive({
  name: {
    value: '',
    error: '',
    check: false,
  },
  email: {
    value: '',
    error: '',
    check: false,
  },
  birth: {
    value: {
      year: null,
      month: null,
      day: null,
    },
    error: '',
    check: false,
  },
  publishDate: {
    value: {
      year: null,
      month: null,
      day: null,
    },
    error: '',
    check: false,
  },
})

const schemaDate = Yup.object().shape({
  year: Yup.number().required(),
  month: Yup.number().required(),
  day: Yup.number().required(),
})
const schemaName = Yup.string().required()
const schemaEmail = Yup.string().required().email()

const confirm = () => {
  const validations = [
    validate(schemaName, profile.name),
    validate(schemaEmail, profile.email),
    validate(schemaDate, profile.birth),
    validate(schemaDate, profile.publishDate),
  ]

  Promise.all(validations).then(() => {
    for (const [key, obj] of Object.entries(profile)) {
      if (obj.check === false) return
    }
    storeProfile.value.name = profile.name.value
    storeProfile.value.email = profile.email.value
    storeProfile.value.birth = profile.birth.value
    storeProfile.value.publishDate = profile.publishDate.value
    console.log('profile', storeProfile.value)
    to(BECOME_CREATOR_ROUTES.CONFIRM)
  })
}
</script>
